<template>
    <div class="search-box">
          <div class="search-box-left">
            <el-form :model="queryParams" ref="queryRef" :inline="true" label-width="0">
              <el-form-item>
                <el-select v-model="queryParams.orderType" placeholder="请选择医嘱类型" @change="handleQuery">
                  <el-option
                    v-for="dict in sys_doctor_order_type"
                    :key="dict.value"
                    :label="dict.label"
                    :value="dict.value"
                  />
                </el-select>
              </el-form-item>
              <el-form-item>
                <el-select v-model="queryParams.treatmentType" placeholder="请选择诊疗类型" @change="handleQuery">
                  <el-option
                    v-for="dict in sys_treatment_type"
                    :key="dict.value"
                    :label="dict.label"
                    :value="dict.value"
                  />
                </el-select>
              </el-form-item>
              <el-form-item>
                <el-radio-group v-model="queryParams.status" size="large" fill="#6cf">
                  <el-radio-button label="全部" value="1" />
                  <el-radio-button label="未停" value="2" />
                  <el-radio-button label="已停" value="3" />
                </el-radio-group>
              </el-form-item>
              <el-form-item>
                <el-checkbox label="显示已撤销医嘱" v-model="queryParams.showCanceled" @change="handleQuery" />
              </el-form-item>
            </el-form>
          </div>
          <div class="search-box-right">
            <el-button class="add-btn op-btn" type="primary" @click="handleCheck"
              >核对</el-button
            >
            <el-button class="add-btn op-btn" type="primary" @click="handleExecute"
              >执行</el-button
            >
            <el-button class="export-btn op-btn" type="warning" @click="handleCancel"
              >撤销</el-button
            >
            <el-button
              class="export-btn op-btn"
              type="warning"
              @click="handleCancelCheck"
              v-if="activeTab === 'canceled' || activeTab === 'all'"
              >撤销核对</el-button
            >
            <el-button
              class="edit-btn op-btn"
              type="success"
              @click="handleAccount"
              v-if="activeTab === 'verify' || activeTab === 'all'"
              >记账</el-button
            >
            <el-button
              class="info-btn op-btn"
              type="info"
              @click="handlePrint"
              v-if="activeTab === 'execute' || activeTab === 'all'"
              >打印</el-button
            >
          </div>
        </div>
        <div class="table-container">
          <el-table
            v-loading="loading"
            :data="orderList"
            @selection-change="handleSelectionChange"
            @row-click="openDetail"
          >
            <el-table-column type="selection" width="55" align="center" />
            <el-table-column label="床位" prop="bedNo" align="center" width="55" />
            <el-table-column label="患者" prop="patientName" align="center" width="80" />
            <el-table-column label="开始时间" prop="startTime" align="center" width="100">
              <template #default="scope">
                {{ scope.row.startTime ? parseTime(scope.row.startTime, '{m}-{d} {h}:{i}') : '-' }}
              </template>
            </el-table-column>
            <el-table-column label="类型" prop="orderType" align="center" width="80" />
            <el-table-column label="医嘱类型" prop="orderTypeLabel" align="center" width="80" />
            <el-table-column label="类别" prop="treatmentType" align="center" width="80" />
            <el-table-column label="状态" prop="statusLabel" align="center" width="80" />
            <el-table-column label="备注" prop="remark" align="center" show-overflow-tooltip />
            <el-table-column label="下达医生" prop="doctorName" align="center" width="80" />
            <el-table-column label="停止医生" prop="stopDoctorName" align="center" width="80" />
            <el-table-column label="停止时间" prop="stopTime" align="center" width="100">
              <template #default="scope">
                {{ scope.row.stopTime ? parseTime(scope.row.stopTime, '{m}-{d} {h}:{i}') : '-' }}
              </template>
            </el-table-column>
          </el-table>

          <el-drawer
            v-model="drawerVisible"
            :append-to="containerBody"
            :with-header="false"
            :show-close="false"
            size="60%"
            class="orders-drawer"
          >
            <div class="orders-drawer__header">
              <div class="orders-drawer__close" @click="handleCloseDrawer">
                <el-icon><Right /></el-icon>
              </div>
              <div class="orders-drawer__title">
                【{{ selectedOrder.orderTypeLabel || '医嘱' }}】
                {{ selectedOrder.drugName || selectedOrder.remark || '—' }}
                <span class="orders-drawer__spec">{{ selectedOrder.drugSpec || '' }}</span>
              </div>
              <div class="orders-drawer__sig">Sig: {{ selectedOrder.sig || '2片  口服  tid  首日: 1' }}</div>
              <div class="orders-drawer__meta">
                开始：{{ selectedOrder.doctorName || '-' }}
                {{ selectedOrder.startTime ? parseTime(selectedOrder.startTime, '{m}-{d} {h}:{i}') : '-' }}
                &nbsp;&nbsp; 停止：{{ selectedOrder.stopDoctorName || '-' }}
                {{ selectedOrder.stopTime ? parseTime(selectedOrder.stopTime, '{m}-{d} {h}:{i}') : '-' }}
              </div>
            </div>

            <el-tabs v-model="drawerTab" class="orders-drawer__tabs">
              <el-tab-pane label="执行明细" name="exec">
                <el-table :data="executeDetails" size="small">
                  <el-table-column label="计划时间" prop="planTime" width="120" />
                  <el-table-column label="状态" prop="status" width="80" />
                  <el-table-column label="执行护士" prop="nurse" width="100" />
                  <el-table-column label="执行时间" prop="execTime" width="120" />
                  <el-table-column label="执行单" prop="execSheet" width="120" />
                  <el-table-column label="发药" prop="dispense" width="80" />
                  <el-table-column label="发药科室" prop="dept" width="120" />
                  <el-table-column label="发药时间" prop="dispenseTime" width="120" />
                </el-table>
              </el-tab-pane>
              <el-tab-pane label="医嘱流转" name="flow">
                <div class="orders-drawer__placeholder">预留</div>
              </el-tab-pane>
              <el-tab-pane label="费用统计" name="fee">
                <div class="orders-drawer__placeholder">预留</div>
              </el-tab-pane>
              <el-tab-pane label="计费明细" name="billing">
                <div class="orders-drawer__placeholder">预留</div>
              </el-tab-pane>
            </el-tabs>
          </el-drawer>
        </div>
        <div class="queryParams-container">
          <el-pagination
            background
            layout="prev, pager, next"
            :total="total"
            :page-size="queryParams.pageSize"
            :current-page="queryParams.pageNum"
            @current-change="handlePageChange"
          />
        </div>
    </div>
</template>
